<template>
    <view>
        <view class="step-select-pet-category-type">
            <scroll-view>
                <view class="wrap">
                    <view
                        :class="['pet-type', 'dog', current === 'dog' ? 'active' : '']"
                        @click="onUpdateSelectPet('dog')"
                    >
                        <view class="theme">
                            <image class="image" src="https://assets.iclss.com/images/select-dog-theme.png" />
                        </view>
                        <view class="pet-details">
                            <view class="">狗狗</view>
                        </view>
                    </view>
                    <view
                        :class="['pet-type', 'cat', current === 'cat' ? 'active' : '']"
                        @click="onUpdateSelectPet('cat')"
                    >
                        <view class="theme">
                            <image class="image" src="https://assets.iclss.com/images/select-cat-theme.png" />
                        </view>
                        <view class="pet-details">
                            <view class="">猫咪</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="buttons">
            <i-button type="primary" @click="onSave" style="width: 100%">下一步</i-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { usePetStore } from "@/store";

const petStore = usePetStore();

const current = ref<"dog" | "cat">("dog");

const onUpdateSelectPet = (type: typeof current.value) => {
    current.value = type;
};

/**
 * 定义组件触发的事件
 * @event next - Lottie 动画播放完成时触发
 */
const emits = defineEmits(["next"]);

const onSave = () => {
    petStore.updateAddPetDetail({
        type: current.value
    });
    onNextStep();
};

const onNextStep = () => {
    emits("next", {
        type: "step-select-pet-category-type"
    });
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
